<style>
    @media screen and (max-width:575px) {
        #vercode {
            position: relative !important;
        }
    }
</style>

<!--页面loading-->
<div id="lyear-preloader" class="loading">
    <div class="ctn-preloader">
        <div class="round_spinner">
            <div class="spinner"></div>
            <img src="/static/admin/images/loading-logo2.gif" alt="" style="border-radius: 50%;">
        </div>
    </div>
</div>
<!--页面loading end-->

<div class="row no-gutters bg-white vh-100">
    <div class="col-md-6 col-lg-7 col-xl-8 d-none d-md-block"
        style="background-image: url(/static/admin/images/login-bg-5.png); background-size: cover;">

        <div class="d-flex vh-100">
            <div class="p-5 align-self-end">
                <br><br><br>
                <p class="text-white">Light Year Admin V4是一个后台管理系统的HTML模板，基于Bootstrap v4.4.1。</p>
            </div>
        </div>

    </div>

    <div class="col-md-6 col-lg-5 col-xl-4 align-self-center">
        <div class="p-5">
            <div class="text-center">
                <a href="index.html"> <img alt="light year admin" src="/static/admin/images/logo-sidebars.png"> </a>
            </div>
            <p class="text-center text-muted"><small>请使用您的账号登录系统</small></p>

            <form method="post">
                <div class="form-group">
                    <label for="username">用户名</label>
                    <input type="text" class="form-control" name="username" id="username" placeholder="请输入您的用户名">
                </div>

                <div class="form-group">
                    <label for="password">密码</label>
                    <input type="password" class="form-control" id="password" name="password" placeholder="请输入您的密码">
                </div>

                <div class="form-group row">
                    <div class="col-lg-8 col-md-8 col-sm-6 col-xs-12">
                        <label for="vercode">验证码</label>
                        <input type="text" class="form-control" name="vercode" id="vercode" placeholder="请输入验证码">
                    </div>
                    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12" style="position: relative;">
                        <img id="vercode" src="{:url('home/index/vercode')}" alt="captcha"
                            onclick="this.src=`{:url('home/index/vercode')}`" style="position: 
                            absolute;bottom: 0;" />
                    </div>

                </div>

                <div class="form-group">
                    <div class="custom-control custom-checkbox">
                        <input type="checkbox" class="custom-control-input" id="rememberme" value="1" name="rememberme">
                        <label class="custom-control-label not-user-select" for="rememberme">5天内自动登录</label>
                    </div>
                </div>

                <div class="form-group">
                    <button class="btn btn-block btn-primary" type="submit">立即登录</button>
                </div>
            </form>
            <!-- <p class="text-center text-muted mt-3">Copyright © 2020 <a href="http://lyear.itshubao.com">IT书包</a>. All
                right reserved</p> -->
        </div>
    </div>
</div>